<template>
  <div class="wrap">
    <div class="header">
      <el-input ref="search" placeholder="请输入寝室号" v-model="Name" :disabled="false"></el-input>
      <el-button type="primary" plain @click="checkDorm()">搜索</el-button>
      <el-button type="primary" plain @click="clearSearch()">重置</el-button>
      <el-button type="success" plain @click="centerDialogVisible = true">添加宿舍
      </el-button>
    </div>

    <!-- 添加宿舍 -->

    <el-dialog title="添加宿舍" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="宿舍编号" prop="dormNum">
          <el-input v-model.number="ruleForm.dormNum" placeholder="请输入编号(数字)"></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称" prop="dormName">
          <el-input v-model="ruleForm.dormName"></el-input>
        </el-form-item>
        <el-form-item label="宿舍水电" prop="dormMoney">
          <el-input v-model.number="ruleForm.dormMoney" placeholder="请输入金额(数字)"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm'),addDorm()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改宿舍 -->

    <el-dialog title="修改宿舍" :visible.sync="centerDialogVisible2" width="30%" center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="宿舍编号" prop="dormNum">
          <el-input disabled v-model="ruleForm.dormNum"></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称" prop="dormName">
          <el-input v-model="ruleForm.dormName"></el-input>
        </el-form-item>
        <el-form-item label="宿舍人数">
          <el-input disabled v-model="ruleForm.dormPep"></el-input>
        </el-form-item>
        <el-form-item label="宿舍水电" prop="dormMoney">
          <el-input v-model.number="ruleForm.dormMoney"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm2('ruleForm'),editDorm()">确 定</el-button>
      </span>
    </el-dialog>

    <div id="main">
      <template>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%" current-change="handleCurrentChange">
          <el-table-column label="宿舍编号" prop="dormNum" width="100">
          </el-table-column>
          <el-table-column prop="dormName" label="宿舍名称">
          </el-table-column>
          <el-table-column prop="dormManNum" label="宿舍人数">
          </el-table-column>
          <el-table-column prop="lastMoney" label="宿舍水电费剩余">
          </el-table-column>
          <el-table-column prop="manId" label="宿舍状态">
            <template slot-scope="scope">
              {{scope.row.manId==0?'正常':'催款中'}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="320">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="changeDorm(scope.$index, scope.row)">编辑</el-button>
              <el-button @click="changeType(scope.$index, scope.row)" type="text" size="small">发起催款提醒</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div id="pages">
      <el-pagination @current-change="handleCurrentChange" @size-change="handlePageSize" background
        :current-page="currentPage" layout="prev, pager, next" :total="total" :page-size="pagesize">
      </el-pagination>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    var checkNum = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else if (value >= 700) {
        callback(new Error('寝室号不能大于700'));
      } else {
        callback();
      }
    };
    var checkMoney = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else {
        callback();
      }
    };
    var checkName = (rule, value, callback) => {
      if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
        callback(new Error('请输入中文'));
      } else {
        callback();
      }
    };
    return {
      val: 1,
      input: '',
      total: 50,
      pagesize: 5,
      Name: '',
      currentPage: 1,
      page: 1,
      loading: true,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      ruleForm: {
        dormName: '',
        dormNum: '',
        dormMoney: '',
        dormPep: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {

        dormName: [
          { required: true, message: '请输入宿舍名称', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' },
        ],
        dormNum: [
          { validator: checkNum, trigger: 'blur' },
          { required: true, message: '请输入宿舍编号', trigger: 'blur' },
        ],
        dormMoney: [
          { required: true, message: '请输入宿舍水电', trigger: 'blur' },
          { validator: checkMoney, trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        // resource: [
        //   { required: true, message: '请选择活动资源', trigger: 'change' }
        // ],
        // desc: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ]
      },

      tableData: [{
        id: '',
        dormNum: '',
        dormName: '',
        dormManNum: '',
        lastMoney: '',
        manId: '',
        powId: ''
      },
      {
        id: 1,
        dormNum: 1010,
        dormName: "男寝",
        dormManNum: 5,
        lastMoney: 20,
        manId: 1,
        powId: 1
      },
      {
        id: 1,
        dormNum: 114,
        dormName: "狗窝",
        dormManNum: 10,
        lastMoney: -100,
        manId: 0,
        powId: 1
      },
      {
        id: 1,
        dormNum: 1010,
        dormName: "男寝",
        dormManNum: 0,
        lastMoney: 20,
        manId: 0,
        powId: 1
      }],
      showData1: [{
        id: '',
        dormNum: '',
        dormName: '',
        dormManNum: '',
        lastMoney: '',
        manId: '',
        powId: ''
      }]
    }
  },

  methods: {

    // 分页组件
    handleCurrentChange (val) {
      this.currentPage = val
      // console.log(this.currentPage);
      this.loading = true;
      this.check();

    },
    handlePageSize (val) {
      this.currentPage = val
      // console.log('条数:');
      // console.log(val);
      // console.log(this.currentPage);
    },

    handleClick (row) {
      console.log(row);
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    clearSearch (row, column) {
      this.$refs.search.value = ""
    },
    headerStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return 'table-th'
      } else if (columnIndex === 0 || columnIndex === 1) {
        return 'table-lt'
      } else {
        return 'table-rt'
      }
    },
    isCenter ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return 'text-align: center'
      } else if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
        return 'text-align: left'
      } else {
        return 'text-align: right'
      }
    },



    // 查询寝室
    check () {
      this.$axios.defaults.headers.token = localStorage.getItem('token');
      console.log(localStorage.getItem('token'))
      this.$axios.get('/dormInfo', {
        params: {
          rows: this.pagesize,
          page: this.currentPage
        },
      }).then(res => {

        console.log(res);
        this.tableData = res.data.data.dormitoryList;
        if (res.data.code == 200) {
          this.loading = false;
          // this.$message('查询成功')
          // console.log()
        } else {
          this.$message('查询失败')
        }
      })
    },


    // 按宿舍名称查询宿舍
    checkDorm () {
      var params = new URLSearchParams()
      params.append('Name', this.Name)
      this.$axios.post('/dormByName', params).then(res => {
        this.tableData = res.data.data.dormitoryList;
        if (res.data.code == 200) {
          this.$message.success('查询寝室成功')
          console.log(res);
        } else {
          this.$message('查询寝室失败')
        }
      })
    },

    // 添加宿舍
    addDorm () {
      var params2 = new URLSearchParams()
      params2.append('dormId', this.ruleForm.dormNum)
      params2.append('dormName', this.ruleForm.dormName)
      params2.append('waterMoney', this.ruleForm.dormMoney)
      this.$axios.post('/addDorm', params2).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.$message.success('添加寝室成功')
          console.log(this.ruleForm.dormNum)
          console.log(this.ruleForm.dormName)
          console.log(this.ruleForm.dormMoney)
          this.check();
        } else {
          this.$message.erro('添加寝室失败')
        }
      })
    },


    // 编辑宿舍(编号)
    changeDorm (index, row) {
      this.centerDialogVisible2 = true;
      this.ruleForm.dormNum = row.dormNum;
      this.ruleForm.dormPep = row.dormManNum;
      this.ruleForm.dormName = row.dormName;
      this.ruleForm.dormMoney = row.lastMoney;
      console.log(index, row)
    },


    //编辑宿舍
    editDorm (index, row) {
      var params3 = new URLSearchParams()
      params3.append('dormId', this.ruleForm.dormNum)
      params3.append('dormName', this.ruleForm.dormName)
      params3.append('waterMoney', this.ruleForm.dormMoney)
      this.$axios.post('/changeDorm', params3).then(res => {
        if (res.data.code == 200) {
          this.$message.success('修改寝室成功')
          this.check()
          console.log(res);
        } else {
          this.$message('修改寝室失败')
        }
      })
      console.log(index, row)
    },



    // 更改寝室状态
    changeType (index, row) {
      if (row.manId = "正常") {
        row.manId = "催款中";
        console.log(row.manId)
      }
      console.log(index, row)
    },

    // 分页（获取总条数）
    chekTotal () {
      // localStorage.getItem("token")
      var params = new URLSearchParams()
      this.$axios.post('/getAllPage', params).then(res => {
        // console.log(res);
        this.total = res.data.data.totalCount;
        // console.log(res.data.data.totalCount)
        if (res.data.code == 200) {
          // this.$message('查询成功')
          console.log()
        } else {
          this.$message('查询失败')
        }
      })
    },

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('添加成功！');
          return this.centerDialogVisible = false
        } else {
          this.$message.error('请输入有效数据！');
          return false;
        }
      });
    },
    submitForm2 (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          return this.centerDialogVisible2 = false
        } else {
          this.$message.error('请输入有效数据！');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted () {
    this.check();
    this.chekTotal();
  }
}
</script>
<style scoped>
.wrap {
  margin-top: 30px !important;
  border-top: 1px solid #fff;
}
.wrap .el-input {
  width: 400px;
}
::v-deep .el-input input {
  padding-left: 20px !important;
}
.wrap .el-button {
  width: 100px;
  height: 40px;
  line-height: 40px;
}
::v-deep .el-table {
  margin-top: 50px !important;
}
::v-deep .el-table th {
  border-color: #666;
}
::v-deep .el-table tr th,
::v-deep .el-table tr td {
  text-align: center;
}
::v-deep .el-table tr th {
  height: 50px;
  background: #eee;
}
::v-deep .el-dialog {
  margin: auto auto !important;
  padding-left: 30px !important;
  width: 800px;
  height: 400px;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  overflow: hidden;
}
::v-deep .el-dialog:nth-child(1) {
  height: 500px;
}

::v-deep .el-dialog .el-dialog__header {
  margin-top: 30px !important;
}
::v-deep .el-dialog .el-form-item {
  margin-top: 30px !important;
}
::v-deep .el-dialog .el-dialog__footer {
  margin-top: 70px !important;
}
::v-deep .el-dialog .el-dialog__footer .el-button:nth-child(1) {
  margin-right: 100px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-form-item__error {
  margin-left: 100px !important;
  margin-top: 5px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-input {
  margin-left: 10px !important;
}
#pages {
  margin-right: 10px !important;
  margin-top: 50px !important;
  float: right;
}
</style>